<template>
  <van-nav-bar
      :title="headerTitle"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <template v-if="newsIsLoadedStatus===0">
    <div class="loading">
      <van-loading vertical size="44">
        <template #icon>
          <van-icon name="star-o" size="44"/>
        </template>
        加载中...
      </van-loading>
    </div>
  </template>
  <template v-else-if="newsIsLoadedStatus===-1">
    <van-empty description="当前的页面不存在" image="network"/>
  </template>
  <template v-else>
    <div class="news-detail">
      <div class="title">{{ news.title }}</div>
      <div class="info">
        <span class="date">{{ filterTime(news.publishTime) }}</span>
        <span class="likes">
          <van-icon
              name="like-o"
              class="icon"
              size="14"
              :class="{ active:isLiked }"
              @click="handleLike"
          />
          <i :style="{color:isLiked?'#ff4d63':''}">{{ news.likes }}</i>
        </span>
      </div>
      <div class="cover">
        <van-image
            :src="news.imageUrl"
            :height="375"
            fit="cover"
        />
      </div>
      <div class="content" v-html="news.content"/>
    </div>
  </template>
</template>
<script setup>
import {computed, onMounted, ref} from 'vue';
import {useRoute} from 'vue-router';
import {showFailToast, showToast} from "vant";
import {getNewsDetail, isLikeNews, likeNews, unlikeNews} from "@/api/news";
import dayjs from "dayjs";
import {getUserLoginStatus} from "@/utils/userIsLogin.js";

const route = useRoute();// 路由
const nowNewsId = ref(null);// 当前新闻ID
const newsIsLoadedStatus = ref(0);// 新闻加载状态，-1失败，0加载中，1成功
const headerTitle = computed(() => {
  const value = newsIsLoadedStatus.value
  if (value === 0) {
    return '加载中...'
  } else if (value === -1) {
    return '加载失败'
  } else {
    return '新闻详情'
  }
})
// 新闻详情初始化
const newsInit = async () => {
  try {
    nowNewsId.value = route.params.id || -1;
    if (nowNewsId.value === -1) {
      newsIsLoadedStatus.value = -1;
      showFailToast('传递的新闻ID不存在');
      return
    }
    await getDetail();
    await checkIsLiked();
  } catch (e) {
    console.log(e)
  }
}
// 请求详情数据
const getDetail = async () => {
  try {
    // 获取新闻详情数据
    const res = await getNewsDetail(nowNewsId.value);
    if (res.msg !== '请求成功') {
      newsIsLoadedStatus.value = -1;
      showFailToast('获取新闻详情失败');
      return
    }
    newsIsLoadedStatus.value = 1;// 加载成功
    const data = res.data;
    news.value = data
  } catch (e) {
    newsIsLoadedStatus.value = -1;
    showFailToast('获取新闻详情失败');
  }
}
// 查看用户是否喜欢当前新闻
const checkIsLiked = async () => {
  const isLoginIn = getUserLoginStatus()
  if (!isLoginIn) {
    return
  }
  try {
    const res = await isLikeNews(nowNewsId.value);
    if (res.msg !== '请求成功') {
      newsIsLoadedStatus.value = -1;
      showFailToast('获取是否喜欢失败');
      return
    }
    newsIsLoadedStatus.value = 1;// 加载成功
    const data = res.data;
    isLiked.value = data
  } catch (e) {
    newsIsLoadedStatus.value = -1;
    showFailToast('获取是否喜欢失败');
    console.log(e)
  }
};
onMounted(() => {
  newsInit();
})
//过滤时间
const filterTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}
// 新闻数据
const news = ref({});
// 是否已经喜欢
const isLiked = ref(false);
// 处理喜欢点击事件
const handleLike = async () => {
  const isLoginIn = getUserLoginStatus()
  if (!isLoginIn) {
    showToast('请先登录')
    return
  }
  try {
    if (isLiked.value) {
      // 取消喜欢
      await unlikeNews(nowNewsId.value);
    } else {
      // 喜欢
      await likeNews(nowNewsId.value);
    }
  } catch (e) {
    console.log(e)
  } finally {
    await getDetail();
    await checkIsLiked();
  }
};

// 处理返回点击事件
const onClickLeft = () => {
  window.history.back();
};
</script>

<style scoped lang="scss">
.news-detail {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  height: calc(100vh - 46px);
  overflow-x: hidden;
  overflow-y: auto;

  .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

}

.date {
  color: #999;
}

.likes {
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 5px;
}

.icon.active {
  color: #f00;
}

.cover {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  font-size: 16px;
  line-height: 1.5;
}


.loading {
  width: 100%;
  height: 50vh;
  margin: 10vh auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
